import React, { FC, useState, useEffect } from "react";
import "./index.scss";
//接口
import api from "../../api/index";
import { ImageUploader, TextArea, Toast } from "antd-mobile/2x";
import { ImageUploadItem } from "antd-mobile/es/components/image-uploader";
import { useHistory } from "react-router-dom";
//组件
import { PickerView } from "../../components/picker";
const icon: any = {
  衣柜: "iconfont icon-yigui",
  洗衣机: "icon-xiyiji iconfont",
  空调: "iconfont icon-kongtiao",
  天然气: "iconfont icon-meiqitianranqi",
  冰箱: "iconfont icon-bingxiang",
  热水器: "iconfont icon-haofangtuo400iconfont2reshuiqi",
  沙发: "iconfont icon-shafa",
  宽带: "icon-kuandai iconfont",
  暖气: "iconfont icon-nuanqi",
  电视: "icon-dianshi1 iconfont",
  床: "iconfont icon-chuang",
};
export const Lease: FC = (props: any) => {
  //路由
  const history = useHistory();
  //筛选数据
  const [condition, setcondition] = useState<any>({});
  //配置高亮
  const [roomList, setRoomList] = useState<any>([]);
  //上传图片
  const [fileList, setFileList] = useState<ImageUploadItem[]>([]);

  const [data, setData] = useState<any>({
    title: "", //标题
    description:
      "【装修描述】 装修简洁，家电配齐，通风采光效果良好，格局方正。",
    houseImg: "", //图片
    oriented: "", //朝向
    supporting: "", //配置
    price: "", //价格
    roomType: "", //户型
    size: "", //大小
    floor: "", //楼层
    community: props.location.state?.community || "", //小区名称
    communityName: props.location.state?.name || "", //小区名称
  });
  console.log(props);

  //开关
  const [visible, setVisible] = useState(false);
  //选择器数据
  const [PickerList, setPickerList] = useState({
    name: "",
    data: [],
  });
  useEffect(() => {
    const getLsit = async () => {
      //获取发布房源信息
      let res: any = await api.getParams();
      console.log(res, 12312);

      setcondition(res.body);
    };
    getLsit();
  }, []);

  //改变发布房源数据
  const onChangeData = (name: string, value: any) => {
    setData((prev: any) => {
      prev = {
        ...prev,
        [name]: value,
      };
      return { ...prev };
    });
  };

  //改变视口
  const onChangePicker = (name: string, data: any) => {
    console.log(data);

    setPickerList((prev: any) => {
      prev = {
        name: name,
        data: data,
      };
      return JSON.parse(JSON.stringify(prev));
    });
    setVisible(true);
  };
  const mockUpload = async (file: File) => {
    console.log(file);
    const formData = new FormData();
    formData.append("file", file);

    let res: any = await api.uploadImg(formData);

    console.log(res);

    setData({
      ...data,
      houseImg:
        data.houseImg === "" ? res.body[0] : data.houseImg + res.body[0],
    });
    return {
      url: "http://47.102.145.189:8009" + res.body[0],
    };
  };

  return (
    <div className="lease">
      <div className="lease-header">
        <i
          className="iconfont icon-xiangzuojiantou"
          onClick={() => history.goBack()}
        ></i>
        <h3>发布房源</h3>
        <span></span>
      </div>
      <div className="lease-main">
        <p>房源信息</p>
        <div className="lease-item">
          <div>
            <span>小区名称</span>
            <input
              type="text"
              placeholder="请输入小区名称"
              value={data.communityName}
              onChange={({ target: { value } }: any) => {
                onChangeData("title", value);
              }}
            />
          </div>
          <p onClick={() => history.push("/search")}>
            <span>请输入小区名称</span>
            <i className="icon-xiangyoujiantou iconfont"></i>
          </p>
        </div>
        <div className="lease-item">
          <div>
            <span>租&emsp;&emsp;金</span>
            <input
              type="text"
              placeholder="请输入租金/月"
              onChange={({ target: { value } }: any) => {
                onChangeData("price", value);
              }}
            />
          </div>
          <p>￥/月</p>
        </div>
        <div className="lease-item">
          <div>
            <span>建筑面积</span>
            <input
              type="text"
              placeholder="请输入建筑面积"
              onChange={({ target: { value } }: any) => {
                onChangeData("size", value);
              }}
            />
          </div>
          <p>
            <span>m</span>
            <sup>2</sup>
          </p>
        </div>
        <div
          className="lease-item"
          onClick={() => {
            onChangePicker("roomType", condition.roomType);
          }}
        >
          <span>户&emsp;&emsp;型</span>
          <p>
            <span>{data.roomType || "请选择"}</span>
            <i className="icon-xiangyoujiantou iconfont"></i>
          </p>
        </div>
        <div
          className="lease-item"
          onClick={() => {
            onChangePicker("floor", condition.floor);
          }}
        >
          <span>所在楼层</span>
          <p>
            <span>{data.floor || "请选择"}</span>
            <i className="icon-xiangyoujiantou iconfont"></i>
          </p>
        </div>
        <div
          className="lease-item"
          onClick={() => {
            onChangePicker("oriented", condition.oriented);
          }}
        >
          <span>朝&emsp;&emsp;向</span>
          <p>
            <span>{data.oriented || "请选择"}</span>
            <i className="icon-xiangyoujiantou iconfont"></i>
          </p>
        </div>
        <div className="lease-item">
          <span>房屋标题</span>
          <span></span>
        </div>
        <input
          type="text"
          placeholder="请输入标题 (如: 整租 小区名 2室 2000元)"
          onChange={({ target: { value } }: any) => {
            onChangeData("title", value);
          }}
        />
        <div className="lease-item">
          <span>房屋图像</span>
          <span></span>
        </div>
        <div className="upload">
          <ImageUploader
            value={fileList}
            onChange={setFileList}
            upload={mockUpload}
            multiple
          />
        </div>
        <div className="lease-set">
          <p>房屋配置</p>
          <div className="set-content">
            {condition.supporting &&
              condition.supporting.map((v: any) => {
                return (
                  <div
                    className={`item ${
                      roomList.indexOf(v.label) !== -1 ? "active" : ""
                    }`}
                    key={v.value}
                    onClick={() => {
                      setRoomList((prev: any) => {
                        let ind = prev.indexOf(v.label);
                        if (ind !== -1) {
                          prev.splice(ind, 1);
                        } else {
                          prev.push(v.label);
                        }
                        return [...prev];
                      });
                    }}
                  >
                    <i className={icon[v.label]}></i>
                    <span>{v.label}</span>
                  </div>
                );
              })}
          </div>
        </div>
        <div className="fgt"></div>
        <div className="describe">
          <p>房屋描述</p>
          <TextArea
            placeholder="请输入内容"
            value={data.description}
            rows={5}
            autoSize={{ minRows: 3, maxRows: 5 }}
            onChange={(val) => {
              onChangeData("description", val);
            }}
          />
        </div>
        <div className="fgt bottom"></div>
      </div>
      <div className="lease-footer">
        <span>取消</span>
        <p
          onClick={() => {
            api
              .addRoom({ ...data, supporting: roomList.join("|") })
              .then((res: any) => {
                if (res.status === 200) {
                  Toast.show({
                    icon: "success",
                    content: "添加成功",
                  });
                  setTimeout(() => {
                    history.goBack();
                  }, 2000);
                } else {
                  Toast.show({
                    icon: "fail",
                    content: "添加失败，未知错误",
                  });
                }
              });
          }}
        >
          提交
        </p>
      </div>
      <PickerView
        visible={visible}
        setVisible={setVisible}
        data={PickerList}
        onChangeData={onChangeData}
      ></PickerView>
    </div>
  );
};

export default Lease;
